<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style type="text/css">
        p.indent {
            text-indent: 1em; /* 单位与 百分比*/
        }
        p.align {
            font-size: 16px;
            text-align: center;
        }
        p.input {
            word-spacing: 10px;  /*单词之间的*/
            /*letter-spacing: 10px;*/  /*字母之间的*/
        }
        p.change{
            text-transform: lowercase;
        }
        p.space{
            white-space: pre-line;
        }
        </style>
</head>
<body>
<div style="width:500px" >

    <p class="indent">This is a p 缩进 </p>

</div>
    <div style="width:200px;background-color:red">
    <p class="align">This is a p 对齐</p>
    </div>
<div>
    <p class="input"> This is a p 间隔 </p>
    <p class="change"> This is a p 大小写，首字母大写转换 </p>
</div>

<div>
    <p style="text-decoration: underline"> This is a p 文本下划线 </p>
    <p style="text-decoration: line-through"> This is a p 文本贯穿线 </p>
    <p style="text-decoration: overline"> This is a p 文本上划线 </p>
</div>
<div>
    <p style="color:blue"> This is a p <span style="background-color: red">文本背景色 </span></p>

</div>
<div>

    <p class="space">This     paragraph has    a  great    many  s p a c e s   with
its textual  content, but their    preservation     will  not prevent
line   wrapping or line breaking. 对于空白字符的处理</p>
    <img src="img/space.JPG">
</div>

<p style="font-size: 1.5em"> This is a p 字体大小
<span style="font-style: italic">风格</span>
<span style="font-weight: 100">粗细</span>
</p>

</body>
</html>